<template>
    <!-- 页脚 -->
    <footer>
        <!-- 页脚上半部分 -->
        <div class="f_top">
            <div class="col1">
                <span>
                    <a href="#" @mouseenter="isDisplay_app" @mouseleave="noDisplay_app">
                        <img src="../assets/footer_img/adr.png" alt="">
                        <span>移动版</span>
                    </a>
                </span>
                <div 
                class="app_img" 
                v-show="isDis_app" 
                @mouseenter="isDisplay_app" 
                @mouseleave="noDisplay_app">
                    <img src="../assets/footer_img/app.png" alt="">
                </div>
                <li v-for="(item,index) in top_col1" :key="index">
                    <a href="#">{{item.name}}</a>
                </li>
            </div>
            <div class="col2">
                <a href="#" class="a1" @mouseenter="isDisplay_wx" @mouseleave="noDisplay_wx"></a>
                <a href="#" class="a2"></a>
                <div class="app_img" v-show="isDis_wx">
                    <img src="../assets/footer_img/app.png" alt="">
                </div>
            </div>
        </div>
        <!-- 页脚下半部分 -->
        <div class="f_bot">
            <div class="row1">
                <div class="police">
                    <img src="../assets/footer_img/icon-police.png" alt="">
                </div>
                &nbsp;&nbsp;
                <li v-for="(item,index) in bot_row1" :key="index">
                    <a href="#">{{item.info}}</a>&emsp;&nbsp;|&nbsp;&emsp;
                </li>
                <p>4.9.7</p>
            </div>
            <div class="row2">
                <li v-for="(item,index) in bot_row2" :key="index">
                    <a href="#">{{item.info}}</a>&emsp;&nbsp;|&nbsp;&emsp;
                </li>
                <p><a href="#">联系电话：010-56538600</a></p>
            </div>
            <div class="row3">
                <p>Copyright © 2006-2022</p>&nbsp;
                <a href="#">ZCOOL站酷</a>
            </div>
        </div>
    </footer>
</template>
<script>
import {reactive,ref} from 'vue'
export default {
    setup(){
        let top_col1 = reactive([
            {name:"关于我们"},
            {name:"用户协议"},
            {name:"隐私政策"},
            {name:"侵权申诉"},
            {name:"企业服务"},
            {name:"帮助中心"},
            {name:"联系我们"},
            {name:"中文"},
            {name:"English"},
        ])
        let bot_row1 = reactive([
            {info:"京公网安备11010502000501号"},
            {info:"广播电视节目制作经营许可证（京）字第06990号"},
            {info:"京ICP备11017824号-4"},
            {info:"京ICP证130164号"},
            {info:"人力资源服务许可证"},
        ])
        let bot_row2 = reactive([
            {info:"营业执照"},
            {info:"网上有害信息举报专区"},
            {info:"不良信息举报电话：010-56538658"},
            {info:"举报邮箱 jubao@zcool.com.cn"},
            {info:"青少年举报邮箱 teenager@zcool.com.cn"}
        ])
        let isDis_app = ref(false)
        let isDisplay_app = ()=>{
            isDis_app.value = true
        }
        let noDisplay_app = ()=>{
            isDis_app.value = false
        }
        let isDis_wx = ref(false)
        let isDisplay_wx = ()=>{
            isDis_wx.value = true
        }
        let noDisplay_wx = ()=>{
            isDis_wx.value = false
        }
        return{
            top_col1,
            bot_row1,
            bot_row2,
            isDisplay_app,
            noDisplay_app,
            isDis_app,
            isDisplay_wx,
            noDisplay_wx,
            isDis_wx,
            
        }
    }
}
</script>
<style lang="scss" scoped>
footer{
    width: 100%;
    height: 360px;
    background-color: #282828;
    // 页脚上半部分
    .f_top{
        width: 74%;
        margin: auto;
        padding-top: 40px;
        padding-bottom: 40px;
        border-bottom: 0.5px solid #383838;
        display: flex;
        .col1{
            width: 70%;
            display: flex;
            justify-content: flex-start;
            color: white;
            position: relative;
            .app_img{
                width: 100px;
                height: 100px;
                border-radius: 5px;
                background-color: white;
                padding: 10px;
                position: absolute;
                top:-120px;
                left: -20px;
                border: 1px dotted rgb(99,99,99);;
                img{
                    height: 100%;
                }
            }
            span{
                a{
                    display: block;
                    width: 80px;
                    height: 50px;
                    line-height: 50px; 
                    font-size: 14px;
                    color: #666666;
                    display: flex;
                    img{
                        width: 24px;
                        height: 23px;
                        margin-top: 12px;
                    }
                    span{
                        display: block;
                        line-height: 50px;
                    }
                }
                a:hover{
                    color: #888484;
                }  
            }
            li{
                width: 11%;
                a{
                    display: block;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    color: #666666;
                }
                a:hover{
                    color: #888484;
                }
            }
        }
        .col2{
            width: 30%;
            display: flex;
            justify-content: flex-end;
            line-height: 50px;
            position: relative;
            .app_img{
                width: 100px;
                height: 100px;
                border-radius: 5px;
                background-color: white;
                padding: 10px;
                position: absolute;
                top:-120px;
                left: 280px;
                border: 1px dotted rgb(99,99,99);;
                img{
                    height: 100%;
                }
            }
            a{
                display: block;
                width: 28px;
                height: 24px;
                margin-top: 10px;
            }
            .a1{
                background-image: url(../assets/footer_img/wx1.png);
                background-size: 100%;
                background-repeat: no-repeat;
                margin-right: 40px;
            }
            .a1:hover{
                background-image: url(../assets/footer_img/wx2.png);
            }
            .a2{
                background-image: url(../assets/footer_img/wb1.png);
                background-size: 100%;
                background-repeat: no-repeat;
                
            }
            .a2:hover{
                background-image: url(../assets/footer_img/wb2.png);
            }
        }
    }
    // 页脚下半部分
    .f_bot{
        width: 74%;
        margin: auto;
        padding-top:20px;
        .row1{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            li{
                color: #666666;
                a{
                    font-size: 12px;
                    color: #666666;
                }
                a:hover{
                    color: #888484;
                    text-decoration: underline;
                }
            }
            p{
                font-size: 12px;
                color: #666666;
                display: block;
                line-height: 20px;
            }
        }
        .row2{
            margin-top: 15px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            li{
                color: #666666;
                a{
                    font-size: 12px;
                    color: #666666;
                }
                a:hover{
                    color: #888484;
                    text-decoration: underline;
                }
            }
            p{
                
                display: block;
                line-height: 20px;
                a{
                    font-size: 12px;
                    color: #666666;
                }
                a:hover{
                    color: #888484;
                    text-decoration: underline;
                }
            }
        }
        .row3{
            margin-top: 15px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            p{
                font-size: 12px;
                color: #666666;
                line-height: 16px;
            }
            a{
                display: block;
                height: 16px;
                line-height: 16px;
                font-size: 12px;
                color: #666666;
            }
            a:hover{
                color: #888484;
                text-decoration: underline;
            }
        }    
    }
}
</style>